<template>
	<view>
		<view class="list spaceBet">
			<view class="listTag">问卷调查</view>
			<view class="listL posRel">
				<image class="wjBgL posAbso" :src="getStaticFilePath('wjBgL.png')"></image>
				<image class="wjBgR posAbso" :src="getStaticFilePath('wjBgR.png')"></image>
				<view class="lCon posRel">
					<view class="wjTit ellip">大学生消费情况调查问卷</view>
					<view class="wjStatus hasFlex alignCen">
						<view class="status ing">进行中</view>
						<view class="endTime">截至时间:2023-12-20</view>
					</view>
				</view>
			</view>
			<view class="listR">
				<view class="joinTxt">已参与</view>
				<view class="num">123523</view>
				<view class="joinBtn">立即参与</view>
			</view>
		</view>
		<view class="list spaceBet">
			<view class="listTag">问卷调查</view>
			<view class="listL posRel">
				<image class="wjBgL posAbso" mode="aspectFill" :src="getStaticFilePath('wjBgL.png')"></image>
				<image class="wjBgR posAbso" :src="getStaticFilePath('wjBgR.png')"></image>
				<view class="lCon posRel">
					<view class="wjTit ellip">大学生消费放到沙发上放到沙发上情况</view>
					<view class="wjStatus hasFlex alignCen">
						<view class="status end">已结束</view>
						<view class="endTime">截至时间:2023-12-20</view>
					</view>
				</view>
			</view>
			<view class="listR">
				<view class="joinTxt">已参与</view>
				<view class="num">123523</view>
				<view class="joinBtn">立即参与</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss" scoped>
	.list{
		position: relative;
		margin-bottom: 30rpx;
		.wjBg{
			width: 690rpx;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2; 
		}
		.listWrap{
			z-index: 1;
		}
		.listL{
			flex: 1;
			border-radius: 20rpx 0 0 20rpx;
			padding: 70rpx 30rpx 20rpx;
			background: #8C70F7;
			overflow: hidden;
			.lCon{
				z-index: 2;
			}
			.wjBgL{
				left: 30rpx;
				top: 0rpx;
				height: 100%;
				z-index: 1;
			}
			.wjBgR{
				width: 16rpx;
				right: -8rpx;
				top: 0;
				height: 100%;
				z-index: 2;
			}
		}
		.listTag{
			height: 46rpx;
			line-height: 46rpx;
			padding: 0 15rpx;
			color: #fff;
			position: absolute;
			left: 30rpx;
			top: 0;
			border-radius: 0 0 16rpx 16rpx;
			font-size: 26rpx;
			background: #FFB3C0;
			z-index: 2;
		}
		.wjTit{
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 30rpx;
			font-weight: 600;
		}
		.status{
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 50rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
			&.ing{
				color: $pss-sq-red;
				background: #fff;
			}
			&.end{
				color: #fff;
				background: #B4ACEF;
			}
		}
		.endTime{
			color: #fff;
			font-size: 24rpx;
		}
		.listR{
			width: 150rpx;
			background: $sq-fue;
			border-radius: 0 20rpx 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.joinTxt{
				text-align: right;
				font-size: 24rpx;
				color: $sq-main8;
				margin-right: 10rpx;
			}
			.num{
				margin: 10rpx 0 20rpx 0;
				text-align: center;
				font-size: 38rpx;
				color: $pss-sq-red;
				font-weight: 600;
			}
			.joinBtn{
				width: 126rpx;
				height: 42rpx;
				line-height: 42rpx;
				background: $pss-sq-main;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				border-radius: 50rpx;
				margin: 0 auto;
			}
		}
	}
</style>